<template>
  <n-image
    :src="src"
    preview-disabled
    :lazy="lazy"
    :width="width"
    object-fit="cover"
    class="text-base rounded h-auto max-h-[300px]"
    :class="classStyle"
  >
    <template #placeholder>
      <el-skeleton animated>
        <template #template>
          <el-skeleton-item variant="image" :style="{ width: width + 'px', height: height + 'px' }" />
        </template>
      </el-skeleton>
    </template>
  </n-image>
</template>

<script setup lang="ts">
interface IImageProps {
  src: string;
  width?: number;
  height?: number;
  lazy?: boolean;
  classStyle?: string;
}
import { NImage } from "naive-ui";

withDefaults(defineProps<IImageProps>(), {
  src: "",
  width: 280,
  height: 280,
  lazy: false,
  classStyle: "",
});
</script>

<style lang="scss" scoped></style>
